﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="gridLogCanvas" width="900" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasGridLog = document.getElementById("gridLogCanvas"); //绘图区域
        canvasGridLog.width = window.innerWidth;
        canvasGridLog.height = window.innerHeight;
        let paintGridLog = new FCPaint(); //绘图对象
        paintGridLog.canvas = canvasGridLog;
        scaleCanvas(paintGridLog);
        //判断主题色
        paintGridLog.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintGridLog.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasGridLog, paintGridLog);
        //判断是否移动端
        paintGridLog.isMobile = isMobileMode();
        if (paintGridLog.isMobile) {
            paintGridLog.scaleFactorX = 2.5;
            paintGridLog.scaleFactorY = 2.5;
        }
        //创建表格
        let gridLog = new FCGrid();

        /*
        * 创建列
        * grid:表格
        */
        let createGridColumn = function (grid) {
            let gridColumn = new FCGridColumn();
            if (grid.paint.defaultUIStyle == "dark") {
                gridColumn.backColor = "rgb(0,0,0)";
                gridColumn.borderColor = "rgb(50,50,50)";
                gridColumn.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridColumn.backColor = "rgb(200,200,200)";
                gridColumn.borderColor = "rgb(200,200,200)";
                gridColumn.textColor = "rgb(0,0,0)";
            }
            gridColumn.allowResize = true;
            return gridColumn;
        };

        /*
        * 创建列
        * grid:表格
        */
        let createGridCell = function (grid) {
            let gridCell = new FCGridCell();
            if (grid.paint.defaultUIStyle == "dark") {
                gridCell.backColor = "none";
                gridCell.borderColor = "rgb(50,50,50)";
                gridCell.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridCell.backColor = "none";
                gridCell.borderColor = "rgb(200,200,200)";
                gridCell.textColor = "rgb(0,0,0)";
            }
            gridCell.font = "Default,13";
            return gridCell;
        };

        /*
        * 初始化表格
        */
        let initGridLog = function () {
            gridLog.dock = "fill";
            addView(gridLog, paintGridLog);
            if (gridLog.paint.defaultUIStyle == "dark") {
                gridLog.backColor = "rgb(0,0,0)";
                gridLog.borderColor = "rgb(100,100,100)";
                gridLog.textColor = "rgb(255,255,255)";
                gridLog.scrollBarColor = "rgb(100,100,100)";
            } else if (gridLog.paint.defaultUIStyle == "light") {
                gridLog.backColor = "rgb(255,255,255)";
                gridLog.borderColor = "rgb(150,150,150)";
                gridLog.textColor = "rgb(0,0,0)";
                gridLog.scrollBarColor = "rgb(200,200,200)";
            }

            //增加列
            let columnNo = createGridColumn(gridLog);;
            columnNo.text = "column1";
            columnNo.width = 100;
            gridLog.columns.push(columnNo);

            let column1 = createGridColumn(gridLog);;
            column1.text = "column2";
            column1.width = 100;
            gridLog.columns.push(column1);

            let column2 = createGridColumn(gridLog);;
            column2.text = "column3";
            column2.width = 100;
            gridLog.columns.push(column2);

            let column3 = createGridColumn(gridLog);;
            column3.text = "column4";
            column3.width = 100;
            gridLog.columns.push(column3);

            let column4 = createGridColumn(gridLog);;
            column4.text = "column5";
            column4.width = 70;
            gridLog.columns.push(column4);

            let column5 = createGridColumn(gridLog);;
            column5.text = "column6";
            column5.width = 70;
            gridLog.columns.push(column5);

            let column6 = createGridColumn(gridLog);;
            column6.text = "column7";
            column6.width = 70;
            gridLog.columns.push(column6);

            let column7 = createGridColumn(gridLog);;
            column7.text = "column8";
            gridLog.columns.push(column7);

            let column8 = createGridColumn(gridLog);;
            column8.text = "column9";
            gridLog.columns.push(column8);
        };

        initGridLog();

        /*
        * 重置大小
        */
        let resizeAll = function () {
            canvasGridLog.width = document.documentElement.clientWidth;
            canvasGridLog.height = document.documentElement.clientHeight;
            scaleCanvas(paintGridLog);
            updateViewDefault(paintGridLog.views);
            invalidate(paintGridLog);
        };

        /*
         * 监听大小改变
         */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        /*
        * 检查绘图
        */
        let checkGridLogPaint = function () {
            let gridRow = new FCGridRow();
            gridLog.rows.push(gridRow);
            for (let j = 0; j < gridLog.columns.length; j++) {
                let cell = new FCGridCell();
                cell.value = "Cell" + gridLog.rows.length + "-" + j;
                cell.textColor = "rgb(255,255,255)";
                cell.backColor = "rgb(0,0,0)";
                gridRow.cells.push(cell);
            }
            invalidateView(gridLog);
        };

        //启动秒表
        setInterval(checkGridLogPaint, 300);
        updateViewDefault(paintGridLog.views);
        //刷新界面
        invalidate(paintGridLog);
    </script>
</body>
</html>
